<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
<style type="text/css">
@media (max-width: 768px) {
.mobImg {
    width: 100%;
}
</style>
</head>
<body>
	<div class="ibox-content">
		<form class="form-horizontal" id="dataform"
			onsubmit="javascripr:return false;">
			<input type="hidden" name="tokenUrl" value="${tokenUrl}"> <input
				type="hidden" name="token" value="${token}">
			<c:if test="${obj ne null }">
				<input type="hidden" name="workId" value="${obj.workId }">
			</c:if>
			<div class="form-group">
				<label class="col-sm-2 control-label">标题 <span class="text-danger">*</span></label>
				<div class="col-sm-10">
					<input type="text" class="form-control" name="workTitle"
						maxLength="20" dataType="*1-20" 
						value="<c:out value="${obj.workTitle }"></c:out>" nullmsg="标题不能为空">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">简要描述 <span class="text-danger">*</span></label>
				<div class="col-sm-10">
					<textarea type="text" class="form-control" name="workDescription"
						maxLength="500" dataType="*1-500" style="height:100px;resize:none;"
						nullmsg="简要描述不能为空"><c:out value="${obj.workDescription }"></c:out></textarea>
				</div>
				
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">图集 <span class="text-danger">*</span></label>
				<div class="col-sm-10">
					<div class="col-sm-5" style="padding-left: 0;" id="fileTips">
						<a onclick="MTools.chooesFile('#fileText')" class="btn btn-primary radius"> 
							<i class="fa fa-cloud-upload"></i> 浏览文件 </a> 
					</div>
					<div class="col-sm-4">
						<input type="hidden" value="${obj.workImgs }" name="workImgs" id="hiddenImg" />
						<img width="50" height="50" id='img_1' style="display: none" />
					</div>
				</div>
			</div>
			<div id="uploadImgs" class="form-group">
				<div class="col-sm-12" style="margin-bottom: 5px" v-for="(img, index) in workImgs">
					<div class="col-sm-2">
						<a style="font-size: 30px;color: red;float: right;" @click="delImg(index)"><i class="fa fa-close"></i></a>
					</div>
					<img class="col-sm-8 mobImg" :src="img" />
				</div>
			</div>
			<div class="form-group ">
				<div class="col-sm-12 text-center">
					<button class="btn btn-success radius" id="submit"><i class="fa fa-check"></i> 保存</button>&nbsp;&nbsp;&nbsp;&nbsp;
					<button class="btn btn-danger radius" id="close"><i class="fa fa-close"></i> 关闭</button>
				</div>
			</div>
		</form>
	</div>
	<form class="form form-horizontal" method="post" style="display: none;"
		enctype="multipart/form-data" target="blankFrame"
		action="${path }/common/doMultiUpload?fileType=image&callBack=upcallback&inputId=hiddenImg">

		<input id="fileText" type="file" multiple="multiple" name="file-1"
			onchange="MTools.selectFile('#showFileName','#fileText','#submitBtn')" />
			
		<input type="submit" id="submitBtn" onclick="MTools.upolad('img_1','file_1')" />
	</form>
	<iframe src="" name="blankFrame" id="blankFrame" style="display: none;"> </iframe>
</body>
<script type="text/javascript"
	src="${path }/resource/js/systools/MJsBase.js"></script>
<script type="text/javascript"
		src="${path }/resource/js/plugin/vue.min.js"></script>
<script type="text/javascript">
	layer.load(2, {
		time : 10 * 1000,
		shade : [ 0.4, '#aeaeae' ]
	});

	MTools.autoFullSelect();
	$(".select2").select2();
	var myForm = MForm.initForm({
		invokeUrl : "${path}/common/addOrModifyMyWork",
		beforeSubmit : function() {
			if(!workImgList || workImgList.length == 0) {
				layer.tips('图集不能为空！', '#fileTips', {
					tips : 1
				});
				return false;
			}
			$('#hiddenImg').val(workImgList.join(";"));
		},
		afterSubmit : function() {
// 			layer.closeAll('loading');
			parent.myGrid.serchData();
		},
	});
	
	var workImgList = new Array();
	if('${obj.workImgs}' && '${obj.workImgs}' != '') {
		workImgList = '${obj.workImgs}'.split(";");
	}
	
	var vuediv = new Vue({
		el : '#uploadImgs',
		data : {
			workImgs : workImgList
		},
		methods: {
			delImg : function(index) {
				workImgList.splice(index, 1);
			}
		}
	});
	
	//上传文件回调
	function upcallback(inputId, url) {
		var imgs = url.split(";");
		$.each(imgs, function(i, img) {
			workImgList.push(img);
		})
		$('#img_1').hide();
	}
	
	var submit = false;
	var close = false;
	if('ontouchstart' in window) {
		
		$("#submit").on("touchstart",function(){
			submit = true;
			$('html').css("overflow","hidden");
	    });
	    $("#submit").on("touchmove",function(){
	    	submit = false;
	    });
	    $("#submit").on("touchend",function(){
	        if(submit) {
	        	layer.load(2, {
					time : 10 * 1000,
					shade : [ 0.4, '#aeaeae' ]
				});
	        	myForm.submit();
	        }
	    });
		
		$("#close").on("touchstart",function(){//alert($('body').find('div.ibox-content').first().height());alert($('body').height());
			close = true;
	    });
	    $("#close").on("touchmove",function(){
	    	close = false;
	    });
	    $("#close").on("touchend",function(){
	        if(close) {
	        	MTools.closeForm();
// 				alert($('body').find('div.ibox-content').first().height());alert($('body').height());
// 				var scrollTop = $('body').height();
// 				alert(scrollTop)
// 	        	$('body').scrollTop(scrollTop);
// 				var scrollHeight = $(document).height();
// 				var windowHeight = $(window).height();
// 				$(window).scrollTop(scrollHeight - windowHeight);
	        }
	    });
	} else {
		$("#submit").on("click", function(){
			myForm.submit();
		});
		
		$("#close").on("click", function(){
			MTools.closeForm();
		});
	}
    
	//移动端加载时不允许滑动
    $("body").on("touchmove", function(event){
    	event.preventDefault;
    }, false);
	
    window.onload = isloaded();
    
    function isloaded() {
    	if($('body').find('div.pace').first().is(":visible")) {
    		setTimeout('isloaded()', 100);
    	} else {
    		$("body").off("touchmove");
    		layer.closeAll('loading');
    	}
    }
</script>
</body>
</html>